<template>
    <div class="container">
        <header>
            <Header></Header>
        </header>
        <div class="stage">
            <img src="./images/title_stage.png" alt="">
            <div>少儿美术发展阶段是一个逐步成长和进步的过程。在这个过程中，家长和教育者应该根据孩子的年龄特点和认知能力，
                提供适当的引导和支持，帮助他们充分发挥想象力和创造力，培养独特的艺术个性和审美能力。
            </div>
            <img src="./images/content_stage.png" alt="">
        </div>
        <div class="content">
            <!-- 流程 -->
            <div class="process">
                <img src="./images/title_process.png" alt="">
                <img src="./images/content_process.png" alt="">
            </div>
            <!-- 体系 -->
            <div class="system">
                <img src="./images/title_system.png" alt="">
                <p>
                    应翔有3-16岁青少年透被课量，场兼种受包含:国画，消围，版围，水彩，水粉，动漫线脑，书法。措。
                    基础这型，雕塑，综合材料课理，本艺，布艺，工作座源程等20余种品受。精益求，国内首创全品类美术教学系课理。
                </p>
                <div class="group">
                    <img src="./images/Subheadings1.png" alt="">
                    <div class="collection">
                        <div class="item">
                            <div>
                                少儿油国课程<br>
                                少儿版画课程<br>
                                少儿国画课程
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                少儿水彩课程<br>
                                少儿素描课程<br>
                                手绘动漫课程
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                少儿泥塑课程<br>
                                服装设计课程<br>
                                珠宝设计课程
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                流行艺术课程<br>
                                西方美术史课程<br>
                                东方美术史课程
                            </div>
                        </div>
                    </div>
                </div>
                <div class="group">
                    <img src="./images/Subheadings2.png" alt="">
                    <div class="collection">
                        <div class="item">
                            <div>
                                创想基础班<br>
                                创想进阶班
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                造型基础班<br>
                                造型进阶班
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                动漫专题班<br>
                                国画专题班
                            </div>
                        </div>
                        <div class="item">
                            <div>
                                素描专题班<br>
                                大师课专题班
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 授课 -->
            <div class="teaching">
                <img src="./images/title_teaching.png" alt="">
                <el-carousel height="650px">
                    <el-carousel-item>
                        <img src="./images/banner1.png" alt="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/banner2.png" alt="">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/banner3.png" alt="">
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '../../components/Header'
import Footer from '../../components/Footer'
export default {
    name: 'join',
    data() {
        return {
        };
    },
    components: {
        Header, Footer
    }
}
</script>

<style scoped>
.container {
    width: 100%;
    min-height: 100vh;
}

header {
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    background-image: url('./images/background.png');
}

.stage {
    margin: 80px 0;
    width: 100%;
    height: 1000px;
    background-size: 100% 100%;
    background-image: url('./images/background_stage.png');
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stage img {
    margin-top: 80px;
}

.stage img:last-child{
    width: 100%;
}

.stage div {
    margin-top: 80px;
    width: 60%;
    text-indent: 2em;
    font-size: 20px;
}

.content {
    width: 100%;
    height: 3500px;
    background-size: 100% 100%;
    background-image: url('./images/background_content.png');
    display: flex;
    flex-direction: column;
    align-items: center;
}

.process {
    margin: 80px 0;
    width: 100%;
    height: 700px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.process>img:last-child{
    width: 100%;
}

.system {
    width: 80%;
    height: 1500px;
    margin: 0 auto;
    text-align: center;
}

.system img {
    margin-top: 100px;
}

p {
    width: 65%;
    font-size: 20px;
    text-indent: 2em;
    text-align: start;
    margin: 0 auto;
    margin-top: 50px;
}

.group {
    width: 100%;
    height: 50%;
    text-align: left;
}

.collection {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 50px;
}

.item {
    width: 300px;
    height: 400px;
    background-size: 100% 100%;
    background-image: url('./images/item.png');
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 40px;
    font-weight: 600;
}

.item div {
    font-size: 20px;
    color: black;
    margin-top: 100px;
}

.teaching {
    width: 60%;
    height: 800px;
    margin: 0 auto;
    text-align: center;
    margin-top: 300px;
}

.teaching>img{
    margin-bottom: 50px;
}

.el-carousel__item img{
    width: 100%;
    height: 100%;
}
</style>
